Summary

Resolves #570

This PR implements a comprehensive UI/UX overhaul of the StudyPlan dashboard, drastically improving readability, spacing, and mobile responsiveness across the board.

Changes

• CSS Variable System: Cleaned up duplicated CSS stylesheets and added new modular CSS variables for spacing (--space-sm, --space-md, etc.) and typography (--font-size-sm, --font-size-base, etc.).
• Mobile Responsiveness:
  • Implemented responsive grid layouts using CSS media queries for tablets (<1024px) and mobile (<768px).
  • Designed an off-canvas mobile sidebar that slides in cleanly when triggered.
  • Added a hamburger menu toggle in the header navigation for smaller screens.
• Visual Polish:
  • Moved messy inline styles from HTML modals (New Task, New Subject, Auth) into standardized CSS classes (.modal-backdrop, .modal-card).
  • Adjusted modal padding, borders, and shadows to look perfect on both desktop and mobile viewports.

Verification

• Verified that all breakpoints scale appropriately.
• Verified that sidebar toggle functionality works cleanly on mobile dimensions.
• Confirmed that modals retain a responsive layout and visual consistency.